// 顶部导航
<template>
  <div class="top-bar">

    <div class="main-nav">

      <span class="sign-block"></span>
      
      <!-- 导航条 -->
      <nav>
        <a @click='event => selecte(index, event)' class="main-nav-item" :class='{"main-nav-item-selected": index === navSeleted}'
          href="javascript:;" v-for='(item, index) of topBarNavConf' :key='index'>
          {{item.label}}
        </a>
      </nav>

    </div>

    <div class="info-bar">

      <!-- 系统工具 -->
      <div class="sys-fn">

        <Tooltip v-for='(item, index) of topBarTools' :key='index' :content='item.tipContent' :placement='item.tipDirection'>
          <span class="iconfont icon" :class="item.iconName" @click='item.fn'></span>
        </Tooltip>

      </div>

      <!-- 用户信息 -->
      <div class="user-info">
        <div class="user-head-portrait" @click='userCenterSwitch'>
          <span class="iconfont  icon-edit" ></span>
          <Avatar :src='userHeadPortrait' size='large'></Avatar>
        </div>

        <h1 class="user-name">
          {{userNickName}}
        </h1>

      </div>

      
      <router-link to="/sign-in">
        <div class="sign-out">
            退出
        </div>
      </router-link>

    </div>

    <!-- 用户中心 -->
    <transition name='right-to-left'>
      <div class="user-center-container" v-show='showUserCenter'>  

        <div class="header">
          <Button 
          @click='(event) =>{userCenterSwitch()}'
          type="error" 
          shape="circle" 
          icon="close" 
          size='small' 
          class='btn-close'>
          </Button>
        </div>       

        <l-user-center/>

      </div>
    </transition>

  </div>

</template>

<script lang='ts'>

  import { Component, Vue, Watch, Prop } from 'vue-property-decorator'

  // import {mapState, mapMutations, mapGetters} from 'vuex'
  import { store } from '@/store/index'

  // 用户中心
  const userCenter = () => import('@/components/ivew_components/user_center/index.vue')
  
  class navItem {
    path: string
    label: string
    key: string
  }

  class topTool {
    fn: any
    iconName: string
    tipContent: string
    tipDirection: string
  }

  @Component({
    components: {
      'l-user-center': userCenter
    },
  })
  export default class topBar extends Vue {

    name: string = 'topBar'

    get userBase (){
      return this.$store['state']['mainStore']['userBase']
    }
      
    get topBarNavConf ():navItem[]{
      return this.$store['state']['modConf']['topBarNavConf']
    }
    
    get showUserCenter(){
      return this.$store['getters']['mainStore/showUserCenter']
    }
    
    get userNickName ():string{
      return this.userBase.nickname;
    }


    topBarTools: topTool[] = [

      {
        fn() {
          console.log('系统消息')
        },
        iconName: 'icon-notice sys-info',
        tipContent: '系统消息',
        tipDirection: 'bottom-start'
      },
      {
        fn() {
          const docPath = 'https://yuque.com/u24718/due1ze';
          window.open(docPath, '_blank')
        },
        iconName: 'icon-question-mark sys-help',
        tipContent: '系统帮助',
        tipDirection: 'bottom-start'
      }

    ]

    navSeleted: number = 0
    userHeadPortrait: string = 'static/my-header.jpeg'

    @Watch('$route')
    onRouteChange(val: any, oldVal: any){
      this.initNav();
    }


    userCenterSwitch(){
      this.$store.commit('mainStore/userCenterSwitch')
    }

    initNav() {
      let onPath: string = this.$route.path;
      let _this = this;

      this.topBarNavConf.forEach((item: navItem, index: number) => {

        if (item.path === onPath) {
          _this.navSeleted = index;
        }
      })


      let selectedEle = <HTMLScriptElement>document.getElementsByClassName('main-nav-item')[_this.navSeleted];
      const signBlock = <HTMLScriptElement>document.getElementsByClassName('sign-block')[0];

      
      setTimeout(() => {
        signBlock.style.left = selectedEle.offsetLeft + 'px';
      }, 0);
    }


    //导航路由跳转
    selecte(index: number, event: any) {
      const path: string = this.topBarNavConf[index].path;
      this.$router.push(path)
    }


    mounted() {
      this.initNav()
    }

  }

</script>

<style scoped lang='scss'>
  $bar_h: _rem(46px);

  .top-bar {
    display: flex;
    padding: 0 0 0 _rem(2px);
    height: $bar_h;
    background: $block_bg_color;
    box-shadow: $default_shadow;
    line-height: $bar_h;
  }


  .main-nav {
    flex: 1 1;
    position: relative;

    .sign-block {
      $h: _rem(2px);

      position: absolute;
      left: 0;
      bottom: 0;
      margin-left: _rem(10px);
      width: 4rem;
      height: $h;
      border-radius: $h;
      background: $main_color;
      transition: all $transition_time;
    }

  }

  .main-nav-item {
    display: inline-block;
    padding: 0 _rem(10px);
    font-size: 1rem;


    &:hover {
      color: $main_color;
    }
  }

  .main-nav-item-selected {
    color: $main_color;
  }

  .info-bar {
    flex: 0 _rem(250px);
    display: flex;
    justify-content: right;
   

    .user-info {
      display: flex;
    }
    .user-head-portrait {
      position: relative;
      flex: 0 _rem(40px);

      .icon-edit{
        opacity: 0;
        @extend %position_center;
        $size: _rem(40px);
        width: $size;
        height: $size;
        border-radius: $size;
        background:  $main_color;
        text-align: center;
        line-height: $size;
        font-size: 1.2rem;
        color: #fff;
        z-index: 9;
        transition: all $transition_time;
        

        &:hover{
          opacity: .64;
        }
      }
      
    }
    .user-name {
      flex: 1 4rem;
      margin-left: _rem(10px);
      font-weight: 500;
      font-size: _rem(12px);
    }
  }


  .sys-fn {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 _rem(20px) 0 0;

    &>div+div {
      margin-left: _rem(10px);
    }
  }

  .icon {
    display: inline-block;
    $size: _rem(26px);
    
    background: $default_bg;
    width: $size;
    height: $size;
    border-radius: 100%;

    font-size: $icon_size;
    color: $font_secondary;
    text-align: center;
    line-height: $size;
    transition: $transition_time_q;

    &:hover {
      background: $main_color;
      color: $font_light_color;
    }

  }

  .sign-out {
    flex: 0  2rem;
    margin-left: _intervals();
    padding: 0 _intervals();
    font-size: _rem(12px);
    text-align: center;
    color: $font_secondary;
    border-left: _rem(1px) solid $border_color_light;
    border-right: _rem(1px) solid $border_color_light;

    transition: $transition_time_q linear;
    
    &:hover{
        background: $danger_color;
        border-color:  $danger_color;
        color: #fff;
    }
    
  }

// 用户中心
  .user-center-container{
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    
    padding: _rem(20px);
    width: _rem(248px);
    min-height: _rem( 600px);
    background: $block_bg_color;
    box-shadow: $default_shadow;
    z-index: 99;

    .btn-close{
      position: absolute;
      opacity: .14;
      top: _rem(10px);
      right: _rem(10px);

      z-index: 99;
      transition: all $transition_time;

       &:hover{
         opacity: 1;
       }
    }
    
  }

</style>
